<template>
    <div class="pageTopComponent" v-if="control">
        <collapseComponent v-for="(cr, crIndex) in control.right" :key="cr.id" :title="cr.name" direction="column" :open="cr.open" :rightIndex="crIndex" @switchCollapse="switchCollapse">
            <div class="catalog" v-for="(crc, crcIndex) in cr.catalog" :key="crc.id" :style="{ display: crc.display }">
                <component v-bind:is="crc.controlName" v-if="crc.display === 'block'" :item="crc" :rightIndex="crIndex" :id="control.id" :catalogIndex="crcIndex" @updateParent="updateParent"></component>
            </div>
        </collapseComponent>
    </div>
</template>
<script>
import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
    name: "pageTopComponent",
    data() {
        return {
            control: null,
            //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
            needUpdate: false,
        };
    },
    created() {},
    props: ["controlsIndex", "controlData"],
    components: {
        collapseComponent: () =>
            import("../../../components/collapseComponent"),
        inputComponent: () => import("./lone/inputComponent"),
        chooseImageComponent: () => import("./lone/chooseImageComponent"),
        selectComponent: () => import("./lone/selectComponent"),
        radioComponent: () => import("./lone/radioComponent"),
        colorComponent: () => import("./lone/colorComponent"),
    },
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        setTimeout(() => {
            this.needUpdate = true;
        }, 1000);
    },
    methods: {
        //初始化
        init() {
            if (this.controlData) {
                this.control = JSON.parse(JSON.stringify(this.controlData));
            }
        },

        //从单个子组件中更新到大类组件这里来
        updateParent(params) {
            let p = JSON.parse(params),
                ri = p.rightIndex,
                ci = p.catalogIndex,
                pe = p.ename,
                pv = p.value;
            //页面名称
            if (pe === "pageName") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //封面图
            if (pe === "pageCover") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //页面关键字
            if (pe === "pageKey") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //底部菜单
            if (pe === "bottomMenu") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
                Bus.$emit("updateMain_bottomMenu", pv);
            }
            //后退按钮
            if (pe === "backButton") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //页面标题
            if (pe === "pageTitle") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //标题文字颜色
            if (pe === "pageTopFontColor") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
            }
            //页面背景颜色
            if (pe === "pageBgColor") {
                this.control.right[ri].catalog[ci].value = pv;
                this.control.main[pe] = pv;
                Bus.$emit("updateMain_pageBgColor", pv);
            }

            //更新到vuex
            this.updateControls(this.control, p.needUpdateMain);

            //更新到main
            if (p.needUpdateMainChild) {
                const emitName = this.control.ename + this.control.id;
                //更新到main中具体组件中的数据
                Bus.$emit(emitName, JSON.stringify(this.control));
            }
        },
        //拉抽屉
        switchCollapse(params) {
            this.control.right[params.rightIndex].open = params.open;
            this.updateControls(this.control);
        },
        //更新到vuex
        updateControls(control,needUpdateMain) {
            if (this.needUpdate) {
                let controls = this.decorate.controls;
                controls[this.controlsIndex] = JSON.parse(
                    JSON.stringify(control)
                );
                this.$store.dispatch("controls", controls);
                if(needUpdateMain) {
                    Bus.$emit("updateMain");
                }
            }
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.pageTopComponent {
    .catalog {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 10px 15px 10px 0px;
        box-sizing: border-box;
    }
}
</style>